<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/element.css">
    <style>
        #app {
            width: 90%;
            margin: auto;
        }

        h2 {
            margin: 10px;

        }
        #tools .el-card__body {
        padding: 5px 5px 5px 20px;
      }
      .el-form-item__label {
        vertical-align: middle;
        float: left;
        font-size: 14px;
        text-align: right;
        width: 68px !important;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-card id="search">
            <el-form :inline="true" class="demo-form-inline">
                <!-- <el-form-item label="序号">
                    <el-input v-model="id" clearable></el-input>
                </el-form-item> -->
                <el-form-item label="名称">
                    <el-input v-model="name" clearable></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="orderIndex" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="medium" type="primary" @click="asSearchHandle" size="large">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card id="tools">
            <el-row>
              <el-button
                size="small"
                icon="el-icon-document-add"
                @click="addAssumptionAction"
                type="primary"
              >
                添加
              </el-button>
              <el-button
                size="small"
                icon="el-icon-document-delete"
                @click="batchDelete"
                type="danger"
              >
                批量删除
              </el-button>
            </el-row>
          </el-card>
        <el-table :data="rows" ref="selection"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" prop="id"/>
            <el-table-column label="名称" prop="name"/>  
            <el-table-column label="专业" prop="orderIndex" width="60px"/>  
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="small"  @click="del(scope.row.name,index)"  type="danger"  icon="el-icon-document-delete">删除</el-button>
                    <el-button size="small"  @click="update(scope.row)" type="primary"  icon="layui-icon-edit">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @current-change="handleCurrentChange" :current-page="currentPage"
            :page-size="pageSize" layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>


    </div>
</body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>
<script>
    /* eslint-disable */
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                //翻页相关数据
                currentPage: 1,
                pageSize: 5,
                //查询表单
                searchForm: {
                    // id:'',
                    name: '',
                    orderIndex:'',
                    page: 1,
                    size: 9999999
                }, 
                    // id:'',
                    name: '',
                    orderIndex:'',
                planList: [],
                formLabelWidth: '120px',
                rows: [],
                total: 0,
                dels:[],
                titleid:0
            }
        },
        methods: {
        // 查询功能
            showNotify: function (value) {
                layer.open({
                    type: 1,
                    title: '',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['860px', '600px'],
                    content: '<h3>' + this.formatValue(value) + '</h3>'
                });
            },
            formatValue: function (value) {
                var temp =
                    '<p style="font-size:20px;text-align:center; text-align:justify;margin:5% 5%;">@value</p>';
                return temp.replace(/@value/, value);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.search();
            },
            asSearchHandle() {
                this.currentPage = 1;
                this.search();
            },
            search() {
                var param = {
                    page: this.currentPage,
                    size: this.pageSize
                };

                if(this.name){
                    param.name = this.name;
                }
                var that = this;
                $.get('/syatem/query_Science', param, function (data) {
                    console.log(data);
                    that.rows = data.data.content;
                    that.total = data.data.totalElements;
                })
            },
            // 添加功能
            addAssumptionAction(value){
                layer.open({
                  type: 2,
                  title: '添加专业',
                  shadeClose: true,
                  shade: false,
                  maxmin: true, //开启最大化最小化按钮
                  area: ['400px', '400px'],
                  content:'/dialog/general/addScience.html',
                  btn:['添加','取消'],
                  btnAlign:'c',
                  yes:(index,layero)=>{
                      layer.close(index);
                      index = layer.load(1,{ 
                          shade:[0.1,'#fff']
                      })
                       axios.post(`/syatem/add_Science?name=${parent.name}&oederIndex=${parent.orderIndex}`).then(res=>{                       
                        if(res.data.success){
                            layer.close(index);
                            layer.msg('添加成功') 
                            location.reload();
                        } else{
                            layer.close(index);
                            layer.msg(res.data.message)
                        }                           
                      })
                    
                  }
              });
            },
        //批量删除
         batchDelete(){
                this.dels.forEach(async v=>{
                   await axios.post('/syatem/delete_Science?name='+v.name)
                })
                location.reload();
            },
            handleSelectionChange(val){ 
                this.dels=val              
           },
        //删除功能
            del(name,i){
                // delItem = item;
                layer.open({
                  type: 1,
                  title: '删除通知',
                  shadeClose: true,
                  shade: false,
                  maxmin: true, //开启最大化最小化按钮
                  area: ['300px', '150px'],
                  content: '<p>您确定要删除吗？</p>',
                  btn: ['删除', '取消'], // 按钮设置
                  btnAlign: 'c',    //按钮显示位置
                  yes:(index,layero)=>{
                    //   let param = new FormData;
                    //   param.append('name',delItem.name)
                    axios.post('/syatem/delete_Science?name='+name).then(res=>{
                        if(res.data.success){
                            layer.close(index);  
                            layer.msg('删除成功') 
                            location.reload();
                            this.search()
                        }else{
                            layer.close(index);
                            layer.msg('服务器异常')   
                        }
                    });
                  }
              });
            },
            // 修改功能
            update(item){  
                updateItem = item;
                layer.open({
                  type: 2,
                  title: '修改专业',
                  shadeClose: true,
                  shade: false,
                  maxmin: true, //开启最大化最小化按钮
                  area: ['500px', '400px'],
                  content:'/dialog/general/alterScience.html',
                  btn:['修改','取消'],
                  btnAlign:'c',
                  yes:(index,layero)=>{
                      layer.close(index);
                      index = layer.load(1,{ 
                          shade:[0.1,'#fff']
                      })
                      let param =new FormData();
                      param.append('id',item.id);
                      param.append('name',parent.name);
                      param.append('orderIndex',parent.orderIndex) 
                      axios.post('/syatem/update_Science',param).then(res=>{
                        if(res.data.success){  
                            layer.close(index);
                            layer.msg('修改成功') 
                            location.reload();  
                        } else{ 
                            layer.close(index);
                            layer.msg(res.data.message)
                        }                           
                      })
                    
                  }
              });
            }
        },
        mounted() {
            this.search();
        }
    })
</script>
</html>